<template>
  <div
    :class="{
      node: true,
      root: isRoot || !show,
      'node-error-state': showError,
    }"
  >
    <div v-if="show" @click="$emit('selected')" :class="{ 'node-body': true, error: showError }">
      <div>
        <div class="node-body-header" :style="{ 'background-color': headerBgc }">
          <el-icon v-if="headerIcon == 'el-icon-user-solid'" style="margin-right: 5px; vertical-align: top; margin-top: 2px" size="13">
            <UserFilled />
          </el-icon>
          <span>{{ title }}</span>
          <el-icon class="el-icon-close" v-if="!isRoot" style="float: right" @click="$emit('delNode')">
            <Close />
          </el-icon>
        </div>
        <div class="node-body-content">
          <i :class="leftIcon" v-if="leftIcon"></i>
          <span class="placeholder" v-if="()=>{ return String(content || '').trim() === ''}">{{ placeholder }}</span>
          <Ellipsis :row="3" :content="content" v-else />
          <el-icon>
            <ArrowRight />
          </el-icon>
        </div>
        <div class="node-error" v-if="showError">
          <el-tooltip effect="dark" :content="errorInfo" placement="top-start">
            <el-icon>
              <Warning />
            </el-icon>
          </el-tooltip>
        </div>
      </div>
    </div>
    <!-- 添加按钮   -->
    <div class="node-footer">
      <div class="btn">
        <InsertButton @insertNodeThree="(type) => $emit('insertNode2', type)"></InsertButton>
      </div>
    </div>
  </div>
</template>

<script setup name="Node" lang="ts">
import InsertButton from "@/components/Process/node/InsertButton.vue";
import {ArrowRight, Close, UserFilled, Warning} from "@element-plus/icons-vue";
type Props = {
  //是否为根节点
  isRoot?: boolean,
  //是否显示节点体组件
  show?: boolean,
  //节点内容区域文字
  content?: string,
  //节点标题
  title?: string,
  //节点提示语
  placeholder?: string,
  //左侧图标
  leftIcon?: string,
  //头部图标
  headerIcon?: string,
  //头部背景色
  headerBgc?: string,
  //展示错误
  showError?:boolean,
  //错误提示
  errorInfo?:string
}
const props = withDefaults(defineProps<Props>(), {
  isRoot: false,
  show: true,
  content: "",
  title:"标题",
  placeholder: "请设置",
  leftIcon: undefined,
  headerIcon:undefined,
  headerBgc: "#576a95",
  showError:false,
  errorInfo:"无信息",
})
</script>

<style lang="scss" scoped>
@import "@/assets/theme";

.root {
  &:before {
    display: none !important;
  }
}

.node-error-state {
  .node-body {
    box-shadow: 0 0 5px 0 #f56c6c !important;
  }
}

.node {
  padding: 0 50px;
  min-width: 220px;
  position: relative;

  &:before {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0;
    border-style: solid;
    border-width: 8px 6px 4px;
    border-color: #cacaca transparent transparent;
    background: #f5f5f7;
  }

  .node-body {
    cursor: pointer;
    max-height: 120px;
    position: relative;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 0 5px 0 #d8d8d8;
    width: 220px;

    &:hover {
      box-shadow: 0 0 3px 0 $primary;

      .node-body-header {
        .el-icon-close {
          display: inline;
          font-size: medium;
        }
      }
    }

    .node-body-header {
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      padding: 5px 15px;
      color: white;
      font-size: xx-small;

      .el-icon-close {
        display: none;
      }
    }

    .node-body-content {
      padding: 18px;
      color: #656363;
      font-size: 14px;

      i {
        position: absolute;
        top: 55%;
        right: 5px;
        font-size: medium;
      }

      .placeholder {
        color: #8c8c8c;
      }
    }

    .node-error {
      position: absolute;
      right: -40px;
      top: 20px;
      font-size: 25px;
      color: #f56c6c;
    }
  }

  .node-footer {
    position: relative;

    .btn {
      width: 100%;
      display: flex;
      padding: 20px 0 32px;
      justify-content: center;
    }

    :deep(.el-button) {
      height: 32px;
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      margin: auto;
      width: 2px;
      height: 100%;
      background-color: #cacaca;
    }
  }
}
</style>
